<template>
	<view class="addChild">
		<view class="u-form">
			<u-form label-width="140" :model="form" ref="uForm">
				<u-form-item required label="姓名" prop="name"><u-input v-model="form.name" /></u-form-item>
				<u-form-item required label="身份证号" prop="idCard"><u-input v-model="form.idCard" /></u-form-item>
				<u-form-item required label="出生日期" prop="birth">
					<u-input disabled @click="timeShow=true" class="u-input" v-model="form.birth" placeholder="请选择日期" />
					<u-picker mode="time" v-model="timeShow" @confirm="birthConfirm"></u-picker>
				</u-form-item>
				<u-form-item required label="所在城市" prop="location">
					<u-input disabled @click="cityShow=true" class="u-input" v-model="form.location" placeholder="请选择地区" />
					<u-picker mode="region" v-model="cityShow" @confirm="cityConfirm"></u-picker>
				</u-form-item>
				<u-form-item required label="学校" prop="school"><u-input v-model="form.school" /></u-form-item>
				<u-form-item required label="班级" prop="gradeClass"><u-input v-model="form.gradeClass" /></u-form-item>
				<u-form-item label="默认关注" prop="defaultStatus">
					<view class="form-item-slot-right">
						<u-checkbox v-if="false" shape="circle" v-model="form.defaultStatus"></u-checkbox>
						<u-switch active-color="#158766" v-model="form.defaultStatus"></u-switch>
					</view>
				</u-form-item>
			</u-form>
		</view>

        <view class="submit">
        	<u-button ripple type="primary" @click="submit">完成</u-button>
        </view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'

	export default {
		data() {
			return {
				timeShow: false,
				cityShow: false,
				form: {
					name: '',
					idCard: '',
					birth: '',
					location: '',
					school: '',
					gradeClass: '',
					defaultStatus: false
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur']
					}],
					idCard: [{
						required: true,
						message: '请输入身份证号',
						trigger: ['blur']
					}],
					birth: [{
						required: true,
						message: '请选择出生日期',
						trigger: ['blur']
						
					}],
					location: [{
						required: true,
						message: '请输入所在城市',
						trigger: ['blur']
					}],
					school: [{
						required: true,
						message: '请输入学校名称',
						trigger: ['blur']
					}],
					gradeClass: [{
						required: true,
						message: '请输入所在班级',
						trigger: ['blur']
					}]
				}
			};
		},
		computed: {
			...mapState(['parentId'])
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		async onLoad(e) {
			if (e.id) {
				// 学生详情
				const parentChildren = await this.getChildDetail(e.id)
				this.form = { ...this.form, ...parentChildren, birth: this.$u.timeFormat(parentChildren.birth, 'yyyy-mm-dd'), ...{ parentChildrenId: e.id } }
			}
		},
		methods: {
			getChildDetail(id) {
				return this.$http.post('/parent/child/get', {
					parentChildrenId: id
				}).then(res => res.data.parentChildren)
			},
			cityConfirm(e) {
				this.form.location = `${e.province.label},${e.city.label},${e.area.label}`
			},
			birthConfirm(e) {
				this.form.birth = `${e.year}-${e.month}-${e.day}`
			},
			checkForm() {
				return new Promise((resolve, reject) => {
					this.$refs.uForm.validate(valid => {
						if (valid) {
							resolve(true)
						} else {
							resolve(false)
						}
					})
				})
			},
			checkChild() {
				return this.$http.post('/child/repeat/check', {
					parentId: this.parentId,
					name: this.form.name,
					idCard: this.form.idCard
				}).then(res => res)
			},
			addChild() {
				return this.$http.post('/child/manual/save', {
					parentId: this.parentId,
					...this.form,
					defaultStatus: +this.form.defaultStatus
				}).then(res => res)
			},
			async submit() {
				// 表单验证
				const checkForm = await this.checkForm()
				if (!checkForm) {
					return
				}
				// 学生是否已添加
				if (!this.form.parentChildrenId) {
					const checkChild = await this.checkChild()
					if (checkChild.code == 1) {
						return
					}
				}
				// 添加小孩
				uni.showLoading({
					title: '获取文章列表'
				})
				const addChild = await this.addChild()
				uni.hideLoading()
				if (addChild.code == 1) {
					return
				}
				// 页面跳转
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.addChild {
		.u-form {
			background: #fff;
			padding: 0 $uni-spacing-row-lg;
			margin-bottom: $uni-spacing-col-lg;
			.form-item-slot-right {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.u-switch {
				
			}
		}
		.submit {
			width: 80%;
			margin: 0 auto;
		}
	}
</style>
